<template>
  <view class="page">
    <u-sticky offset-top="0">
      <view class="head-search-wrap">
        <!-- #ifdef WEB -->
        <!-- <w_fill_block height="88" description="顶部固定" /> -->
        <!-- #endif -->
        <!-- 	<u-navbar :fixed="false" title="热门搜索" :bgColor="'transparent'" :autoBack="true"
					:titleStyle="{color:'#000000'}" :leftIconColor="'#000000'">
				</u-navbar> -->
        <view class="head-search">
          <u-search
            v-model="keyword"
            height="36"
            bgColor="#F6F6F6"
            :showAction="false"
            searchIconSize="20"
            placeholderColor="#959595"
            placeholder="搜索产品名称"
            @search="handleSearch"></u-search>
        </view>

        <!-- 产品筛选 -->
        <view class="head-filter">
          <view class="tabs flex-center">
            <view
              class="tab-item flex-center"
              v-for="(item, index) in tabs"
              :key="index"
              @click="tabClick(item, index)"
              :class="{ active: tabSelect.value == item.value }">
              <view class="tab-title">
                {{ item.title }}
              </view>
              <view class="tab-sorts" v-if="item.sort">
                <image
                  v-if="
                    tabSelect.value == item.value && tabSelect.sort == 'desc'
                  "
                  src="@/static/product/sort-desc.png"
                  mode=""></image>
                <image
                  v-else-if="
                    tabSelect.value == item.value && tabSelect.sort == 'asc'
                  "
                  src="@/static/product/sort-asc.png"
                  mode=""></image>
                <image v-else src="@/static/product/sort.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-sticky>

    <view class="page-ctx">
      <view class="product-wrap">
        <productList :list="products"></productList>
        <u-loadmore :status="product_loadmore_status" />
      </view>
    </view>
  </view>
</template>

<script>
import productList from "@/components/product/productList.vue";
export default {
  components: {
    productList,
  },
  data() {
    return {
      title: "", //热销商品  优惠券商品  分类标题
      keyword: "", //关键字搜索
      coupon_id: "", //优惠券可用商品
      channelId: "", //分类搜索商品
      tags: "", //商品标签
      //
      brand_id: "", //品牌id
      products: [],
      pagination: {
        page: 1,
        pageNum: 10,
      },
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore

      //
      tabSelect: {
        title: "综合",
        value: 0,
        sort: "", //asc - 升序 desc - 降序
        order1_value: "",
        order2_value: "",
      },
      tabs: [
        {
          title: "综合",
          value: 0,
          sort: "",
          order1_value: "0",
          order2_value: "",
        },
        {
          title: "销量",
          value: 1,
          sort: "desc", //asc - 升序 desc - 降序
          order1_value: "1",
          order2_value: "",
        },
        {
          title: "价格",
          value: 2,
          sort: "desc",
          order1_value: "2",
          order2_value: "",
        },
      ],
      //
    };
  },

  onLoad(option) {
    //场景1 查询指定分类下产品 /product-list?title=分类标题&channelId=776
    //场景4 查询包含关键字产品  /product-list?title=搜索结果&keyword=xxx
    //场景3 查询优惠券商品 /product-list?title=优惠券商品&coupon_id=58
    //场景5 查询包含标签产品  /product-list?title=每日特价&tags=每日特价
    //场景2 查询热门商品 /product-list?title=热销商品
    this.keyword = option.keyword || "";
    let title = option.title || "";
    this.title = option.title || "";
    this.channelId = option.channelId || "";
    this.tags = option.tags || "";
    this.coupon_id = option.coupon_id || "";
    this.brand_id = option.brand_id || "";

    //
    this.setNavbarTitle(title);

    if (this.channelId) {
      //
    } else if (title == "热销商品") {
      this.tabSelect = this.tabs[1];
    } else if (title == "优惠券商品") {
      //
    } else if (title == "搜索结果" || title == "热门搜索") {
    }

    this.setView();
  },

  onReachBottom() {
    this.loadMore();
  },

  methods: {
    setNavbarTitle(title) {
      uni.setNavigationBarTitle({
        title: title,
      });
    },
    loadMore() {
      console.log(this.product_loadmore_status, "1200");
      if (this.product_loadmore_status == "loadmore") {
        this.product_loadmore_status = "loading";
        this.pagination.page++;
        this.query_product();
      }
    },
    initQuery() {
      this.products = [];
      this.pagination.page = 1;
      this.product_loadmore_status = "loadmore";
    },

    setView() {
      this.query_product();
    },

    query_product(option) {
      let params = {
        action: "product_plist",
        ...this.pagination,
        channelId: this.channelId,
        keyword: this.keyword,
        orderType: this.tabSelect.order1_value || "", //排序字段(ordering(默认)推荐 orders热门 id新品 priceSale价格)
        yhq_id: this.coupon_id,
        tags: this.tags || "",
        brandId: this.brand_id || "",
      };

      if (this.tabSelect.title == "价格" && this.tabSelect.sort == "desc") {
        params.orderType = 3;
      }

      this.$api({
        url: "/service.php",
        method: "get",
        data: params,
      }).then((res) => {
        if (res.code == 200) {
          if (option && option.is_reset == 1) {
            this.products = [];
          }
          let list = res.data.list;
          this.products = this.products.concat(list);
          this.product_loadmore_status =
            res.data.count > this.products.length ? "loadmore" : "nomore";
        }
      });
    },

    tabClick(item, index) {
      if (this.tabSelect.value != item.value) {
        //排序项切换
        this.tabSelect = item;
      } else {
        //当前排序项
        if (!item.sort) {
          return;
        } else {
          item.sort = item.sort == "asc" ? "desc" : "asc";
          this.tabSelect = item;
        }
      }

      this.initQuery();
      this.query_product({
        is_reset: 1,
      });
    },

    handleSearch() {
      this.initQuery();
      this.query_product({
        is_reset: 1,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6fafd;
}
</style>
<style lang="scss" scoped>
.page {
}

.page-ctx {
  padding: 32rpx;
}

.head-search-wrap {
  background: #ffffff;
}

.head-search {
  padding: 20rpx 32rpx;
  background-color: transparent;
}

.head-filter {
  .tabs {
    .tab-item {
      height: 88rpx;
      line-height: 88rpx;
      position: relative;
      // padding: 25rpx 0;
      text-align: center;
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;

      &.active {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;

        &::after {
          content: "";

          position: absolute;
          z-index: 2;
          bottom: 12rpx;
          left: 50%;
          transform: translate(-50%);
          width: 48rpx;
          height: 4rpx;
          background: #cb0011;
          border-radius: 2rpx 2rpx 2rpx 2rpx;
        }
      }

      .tab-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }

      .tab-sorts {
        position: absolute;
        left: 50%;
        width: 36rpx;
        height: 36rpx;
        width: 15rpx;
        height: 36rpx;

        margin-left: 40rpx;

        image {
          width: 36rpx;
          height: 36rpx;

          width: 15rpx;
          height: 36rpx;
        }
      }
    }
  }
}
</style>
